<template>
  <div>
      <header class="fixed">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          :class="isshow? 'showheader' : ''"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
        >
          <el-menu-item index="1" style="border-bottom: none; text-decoration: none">
            <img
              src="https://free-img.400040.xyz/4/2024/07/03/6684e4ee7f3c0.png"
              class="img"
              alt="logo"
            />
          </el-menu-item>
          <div class="flex-grow" />
          <div class="search">
            <el-input
              v-model="searchinput"
              style="width: 240px; margin-top: 10px; margin-right: 10px"
              placeholder="请输入"
            >
              <template #suffix>
                <i-ep-search />
              </template>
            </el-input>
          </div>
          <el-menu-item index="6"> <i-ep-House /> 首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title><i-ep-Folder /> 分类</template>
            <el-menu-item index="2-1">学习笔记</el-menu-item>
            <el-menu-item index="2-2">技术杂烩</el-menu-item>
            <el-menu-item index="2-3">随便写写</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="3"><i-ep-edit />归档</el-menu-item>
          <el-menu-item index="5"><i-ep-InfoFilled /> 关于我</el-menu-item>
        </el-menu>
      </header>
      <div>
        <router-view :key="route.path"></router-view>
        <el-backtop :bottom="100">
          <div style="
          height: 100%;
          width: 100%;
          background-color: #f5f5ff;
          box-shadow: 0;
          border: none;
          text-align: center;
          line-height: 40px;">
            <img src="https://free-img.400040.xyz/4/2024/06/24/66794c381e004.png" style="width: 40px;height: 40px;" alt="">
          </div>
        </el-backtop>
      </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const activeIndex = ref('6')
onMounted(()=>{
  activeIndex.value = sessionStorage.getItem('activeIndex') || '6'
})
const handleSelect = (key, keyPath) => {
  sessionStorage.setItem('activeIndex', key)
  switch (key) {
    case '2-1':
      router.push('/category/学习笔记')
      break
    case '2-2':
      router.push('/category/技术杂烩')
      break
    case '2-3':
      router.push('/category/随便写写')
      break
    case '3':
      router.push('/archives')
      break
    case '5':
      router.push('/about')
      break
    case '6':
      router.push('/home')
      break
  }
}
const searchinput = ref('')
const isshow = ref(false)
// 可视窗口定位 标签到达某个位置后跟随滚动条滚动
window.addEventListener('scroll', function() {
  if (route.path == '/home') {
    if (window.pageYOffset > 800) {
      isshow.value = true
    } else {
      isshow.value = false
    }
  } else {
    isshow.value = true
  }
});
</script>

<style lang="less" scoped>
.flex-grow {
  flex-grow: 1;
}
.img {
  height: 58px;
  width: auto;
  object-fit: cover;
}
.fixed {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 99;
}
.el-menu-demo{
  background: transparent !important;
  border: none !important;
}
.showheader{
  background: #fff !important;
  border-bottom: 2px solid #fff !important;
}
</style>
